<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>支付订单</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<style type="text/css">
			body {
				background-color: #fff;
			}
			
			.mui-content {
				position: relative;
				background-color: inherit
			}
			
			.hotel-header,
			.mui-title,
			.hotel-header .mui-icon {
				color: #e61874;
				background: #fff;
			}
			
			.mui-bar .mui-btn-nav.mui-pull-left {
				margin-left: 0;
			}
			
			.hotel-header .mui-btn {
				font-size: 1.4rem;
				color: #333;
			}
			
			.mui-bar-nav.mui-bar .mui-icon {
				font-size: 1.4rem;
				color: #333;
				padding-left: 1.2rem;
			}
			
			.pay-method {
				position: absolute;
				top: 5rem;
				z-index: 100;
				width: 100%;
				text-align: center;
			}
			
			.pay-method span {
				font-size: 1rem;
				color: #999;
			}
			
			.order-page {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 4.5rem 0;
			}
			
			.order-head {
				font-size: 1.8rem;
				color: #333;
			}
			
			.order-num {
				font-size: 1.4rem;
				color: #999;
				padding: 1.5rem 0 3rem;
			}
			
			.order-price {
				font-size: 2.9rem;
				color: #333;
			}
			
			.order-detail {
				padding: 0 1.2rem;
			}
			
			.receipt {
				padding-bottom: 1.5rem;
			}
			
			.flex {
				display: flex;
				justify-content: space-between;
			}
			
			.font14 {
				font-size: 1.4rem;
				color: #999;
			}
			
			.foot {
				display: flex;
				align-items: center;
				bottom: 0;
				height: 5.4rem;
				line-height: 5.4rem;
				width: 100%;
				background-color: #fff;
				padding: 0 1.2rem;
				margin-top: 8.4rem;
			}
			
			.foot span {
				display: inline-block;
				width: 100%;
				height: 4.2rem;
				line-height: 4.2rem;
				font-size: 1.6rem;
				text-align: center;
				color: #fff;
				background-color: #e61874;
				border-radius: 0.4rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<button class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">取消</button>
			<h1 class="mui-title">确认支付</h1>
		</header>
		<div class="mui-content">
			<div class="pay-method">
				<span>微信安全支付</span>
			</div>
			<div class="order-page">
				<span class="order-head">爱爱网酒店订单</span>
				<span class="order-num">订单编号 123456789</span>
				<span class="order-price">￥1091.31</span>
			</div>
			<div class="order-detail">
				<div class="receipt font14 flex">
					<span>收款方</span>
					<span>爱爱网</span>
				</div>
				<div class="font14 flex">
					<span>商品</span>
					<span>酒店订单-订单编号123456789</span>
				</div>
			</div>
		</div>
		<div class="foot" onclick="pay(this.id)">
			<span>立即支付</span>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script type="text/javascript" src="../js/immersed.js"></script>
		<script type="text/javascript">
			mui.init({
				preloadPages: [{
					id: 'pay-successful.html',
					url: 'pay-successful.html'
				}],
				swipeBack: true //启用右滑关闭功能
			});

			var muiContent = document.getElementsByClassName("mui-content")[0];
			var orderid; // 订单id
			var methodid; // 支付方式id
			var payMethod; // 支付方式文本
			var totalamount; // 最终支付金额
			var foot = document.getElementsByClassName("foot")[0];

			window.addEventListener('cpID', function(event) {
				//获得事件参数
				orderid = event.detail.orderid; // 订单id
				methodid = event.detail.methodid; // 支付方式
				payMethod = event.detail.payMethod;
				totalamount = event.detail.totalamount; // 最终支付金额
				var html = '';

				html += '<div class="pay-method">';
				html += '<span>' + payMethod + '</span></div>';
				html += '<div class="order-page">';
				html += '<span class="order-head">爱爱网酒店订单</span>';
				html += '<span class="order-num" id="' + orderid + '">订单编号' + orderid + '</span>';
				html += '<span class="order-price">￥' + totalamount + '</span></div>';
				html += '<div class="order-detail"><div class="receipt font14 flex">';
				html += '<span>收款方</span>';
				html += '<span>爱爱网</span></div>';
				html += '<div class="font14 flex">';
				html += '<span>商品</span>';
				html += '<span>酒店订单</span></div></div>';

				muiContent.innerHTML = html;

				foot.setAttribute('id', methodid);
			});

			var pays = {};

			function plusReady() {
				// 获取支付通道
				plus.payment.getChannels(function(channels) {
					// console.log(JSON.stringify(channels)); // [{"id":"alipay","description":"支付宝","serviceReady":true},{"id":"wxpay","description":"微信","serviceReady":true}]
					var txt = "支付通道信息：";
					for(var i in channels) {
						var channel = channels[i];
						if(channel.id == 'qhpay' || channel.id == 'qihoo') { // 过滤掉不支持的支付通道：暂不支持360相关支付
							continue;
						}
						pays[channel.id] = channel;
						txt += "id:" + channel.id + ", ";
						txt += "description:" + channel.description + ", ";
						txt += "serviceReady:" + channel.serviceReady + "； ";
						var de = document.createElement('div');
						de.setAttribute('class', 'button');
						de.setAttribute('onclick', 'pay(this.id)');
						de.id = channel.id;
						de.innerText = channel.description + "支付";
//						muiContent.appendChild(de);
						checkServices(channel);
					}
					// info.innerText = txt;
				}, function(e) {
					// outLine("获取支付通道失败：" + e.message);
				});
			}
			document.addEventListener('plusready', plusReady, false);
			// 检测是否安装支付服务
			function checkServices(pc) {
				if(!pc.serviceReady) {
					var txt = null;
					switch(pc.id) {
						case "alipay":
							txt = "检测到系统未安装“支付宝快捷支付服务”，无法完成支付操作，是否立即安装？";
							break;
						default:
							txt = "系统未安装“" + pc.description + "”服务，无法完成支付，是否立即安装？";
							break;
					}
					plus.nativeUI.confirm(txt, function(e) {
						if(e.index == 0) {
							pc.installService();
						}
					}, pc.description);
				}
			}

			var w = null;
			// var PAYSERVER = 'http://demo.dcloud.net.cn/payment/?payid=';
			var PAYSERVER = 'http://www.aiai.com/alipay/pay/create?id=';
			// 支付
			function pay(id) {
				console.log(id);
				console.log(orderid);
				console.log(totalamount);
				if(w) {
					return;
				} //检查是否请求订单中
				if(id === 'appleiap') {
					//					outSet("应用内支付");
					clicked('payment_iap.html');
					return;
				}
				// outSet("----- 请求支付 -----");
				var url = PAYSERVER;
				if(id == 'alipay' || id == 'wxpay') {
					url += orderid;
				} else {
					plus.nativeUI.alert("当前环境不支持此支付通道！", null, "酒店预订");
					return;
				}
				var appid = plus.runtime.appid;
				if(navigator.userAgent.indexOf('StreamApp') >= 0) {
					appid = 'Stream';
				}
//				url += '&appid=' + appid + '&total=';

				w = plus.nativeUI.showWaiting();
				// 请求支付订单
				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function() {
					switch(xhr.readyState) {
						case 4:
							w.close();
							w = null;
							if(xhr.status == 200) {
								// outLine("----- 请求订单成功 -----");
								// outLine(xhr.responseText);
								var order = xhr.responseText;
								console.log("order" + order);
								plus.payment.request(pays[id], order, function(result) {
									// outLine("----- 支付成功 -----");
									console.log("result" + JSON.stringify(result));

									// 向支付成功页面传值      跳转页面
									var paySuccessfulPage = null;
									// 获得支付成功页面
									if(!paySuccessfulPage) {
										paySuccessfulPage = plus.webview.getWebviewById('pay-successful.html');
									}
									// 触发支付成功页面的psID事件
									mui.fire(paySuccessfulPage, 'psID', {
										 orderid: orderid, // 订单id
										// methodid: methodid, // 支付方式id
										// payMethod: payMethod, // 支付方式文本
										// totalamount: totalamount // 最终支付金额
									});
									// 打开支付成功页面
									mui.openWindow({
										id: 'pay-successful.html',
										show: {
											autoShow: true
										}
									});

									plus.nativeUI.alert("支付成功：感谢你的使用，我们会继续努力完善产品。", function() {
										// back();
									}, "酒店预订");
								}, function(e) {
									// outLine("----- 支付失败 -----");
									// outLine("[" + e.code + "]：" + e.message);
									plus.nativeUI.alert("更多错误信息请参考支付(Payment)规范文档：http://www.html5plus.org/#specification#/specification/Payment.html", null, "支付失败：" + e.code);
								});
							} else {
								// outLine("----- 请求订单失败 -----");
								// outLine(xhr.status);
								plus.nativeUI.alert("获取订单信息失败！", null, "酒店预订");
							}
							break;
						default:
							break;
					}
				}
				xhr.open('GET', url);
				// outLine("请求支付订单：" + url + amount);
				xhr.send();
			}
		</script>
	</body>

</html>